import React from 'react';
import { Col, Form, Input, Row, Select, Spin } from 'antd';
import pageStyles from '@/common/pageLayout.less';
import { UploadFormCommon } from '@/components/UploadForm';
import { getLoadMapList, getTenantID } from '@/utils';
import { ILoadMapTypeAll } from '@/common';
import ScrollBarLayout from '@/components/ScrollBarLayout';
import Cls from 'classnames';

interface IUpdateNeedEditAttachFormAPI {
  formRef: any;
  prefixCls: string;
  onOpenReadOfdWord: any;
}

export const AddAttachForm: React.FC<IUpdateNeedEditAttachFormAPI> = ({ formRef, prefixCls, onOpenReadOfdWord }) => {
  const loadMdicIds: string[] = [
    `${getTenantID()}${ILoadMapTypeAll.CONTRACT_FIELDTYPE}`, //合同附件类型
  ];

  const { loadMapInfo, mapLoading } = getLoadMapList(loadMdicIds);

  return (
    <>
      <ScrollBarLayout style={{ padding: '0.5rem 0' }}>
        <Spin spinning={mapLoading}>
          <div className={Cls(pageStyles['fromView-styles'], prefixCls + 'addSignAttachForm')}>
            <Form form={formRef}>
              <Row>
                <Col span={24}>
                  <Form.Item
                    label="附件类型"
                    name="attachType"
                    rules={[
                      {
                        required: true,
                        message: '请选择',
                      },
                    ]}
                  >
                    <Select placeholder="请选择">
                      {loadMapInfo?.[`${getTenantID()}${ILoadMapTypeAll.CONTRACT_FIELDTYPE}`]?.map((item: any) => {
                        return (
                          <Select.Option key={item?.id} value={item?.id}>
                            {item?.name}
                          </Select.Option>
                        );
                      })}
                    </Select>
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item
                    label="附件名称"
                    name="attachName"
                    rules={[
                      {
                        required: true,
                        message: '请输入',
                      },
                    ]}
                  >
                    <Input placeholder="请输入" />
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item label="附件" name="attachURL">
                    <UploadFormCommon
                      form={formRef}
                      label=""
                      fileFormName={'attachURL'}
                      spanCol={24}
                      inRowProportion={24}
                      name={'attachFile'}
                      required={true}
                      accept={'.docx|.doc|.jpg|.jpeg|.png|.pdf'}
                      url={'/contractController/uploadFile'}
                      downloadUrl={'/contractController/downloadFile'}
                      fileFormDelName={'attachURLDel'}
                      delFunc={() => {}}
                      maxFile={1}
                      defaultFiles={null}
                      filedTypeTable={false}
                      disabledUpload={false}
                      fieldBusiPath={'contract/info'}
                      onChangeFormValues={(changeValues: Record<string, any>) => {
                        const changeKeyStr: string = Object.keys(changeValues)?.toString();
                        console.log('changeKeyStr', changeKeyStr);
                      }}
                      isEdit={true}
                      onOpenReadOfdWord={onOpenReadOfdWord}
                    >
                      上传附件
                    </UploadFormCommon>
                  </Form.Item>
                </Col>
              </Row>
              <Row>
                <Col></Col>
              </Row>
            </Form>
          </div>
        </Spin>
      </ScrollBarLayout>
    </>
  );
};
